// 搜索框
var searchCon = document.querySelector(".searchCon");
var searchBtn = document.querySelector(".searchBtn");
var orderColBox = document.querySelector(".orderColBox");
var orderTypeBox = document.querySelector(".orderTypeBox");
// 上一页
// 选择排序
var select = document.querySelector(".select");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var listPage = document.querySelector(".listPage");
console.log(listPage, "listPage");

var resetBtn = document.querySelector(".resetBtn");

// 页码
var pageTips = document.querySelector(".pageTips");
// 全局变量  => 1. 记录页面加载的默认值  2. 点击修改后的数值
var key = ""; // 页面加载时 默认搜索全部数据
var orderCol = "id"; //页面加载时  默认按照 id排序
var orderType = "asc"; // 页面加载时 默认升序
var pageIndex = 1; // 页面加载时 默认显示第一页
var showNum = 6; // 页面加载时 默认每页显示五条

// 判断是否登录
var tips = document.getElementsByClassName("tips")[0];
var user = getCookie("lgc");
if (user) {
  tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`;
}
//   }else{
//     location.href = "../html/reg.html?returnUrl=" + encodeURIComponent(location.href)
//   }

function exit() {
  deleteCookie("lgc");
  location.reload();
}
// 页面加载是渲染所有列表
console.log(111);
loadGrade();

// 点击购买跳转详情页
// 首先获取购买按钮
// var purchased = document.querySelector(".purchased");
// // 做点击事件

// listPage的事件委托
var listPage = document.querySelector(".listPage");
// console.log(listPage, "listPage");
// 事件捕获addEventListener
listPage.addEventListener(
  "click",
  (e) => {
    e = e || window.event;
    var target = e.target || e.srcElement;
    // goDetail_2
    var curiId = target.id.split("_")[0];
    var goodsId = target.id.split("_")[1];
    console.log(target, goodsId);
    if (curiId == "goDetail") {
      console.log(curiId, "goDetail");
      // return;
      location.href = `../html/Detail.html?id=${goodsId}`;
    }
  },
  false
);

// 重置刷新页面
resetBtn.onclick = function () {
  key = ""; // 页面加载时 默认搜索全部数据
  orderCol = "id"; //页面加载时  默认按照 id排序
  orderType = "asc"; // 页面加载时 默认升序
  pageIndex = 1; // 页面加载时 默认显示第一页
  showNum = 6; // 页面加载时 默认每页显示五条
  loadGrade();
};

// 搜索 排序
searchBtn.onclick = function (e) {
  console.log(searchCon.value);
  var e = e || window.event;
  var target = e.target || e.srcElement;

  key = searchCon.value.trim();
  loadGrade(); //重新渲染页面
};
// 切换每页显示的页数
select.onchange = function () {
  // console.log(123);

  showNum = this.value.trim();
  // pageIndex = 1;  每次切换showNum  => pageIndex = 1(从第一页显示)
  loadGrade();
};
//排序
orderColBox.onclick = function (e) {
  // console.log(e, "e");
  e = window.event || e;
  var target = e.target || e.srcElement;
  console.log(target, "target");
  if (target.value == "id") {
    // console.log(1111, "id");
    orderCol = target.value;
    // loadGrade();
  } else if (target.value == "items_price") {
    // console.log(222, "price");
    orderCol = target.value;
    // loadGrade();
  }
  loadGrade();
};
orderTypeBox.onclick = function (e) {
  // console.log(e, "e");
  e = window.event || e;
  var target = e.target || e.srcElement;
  console.log(target, "target");
  if (target.value == "asc") {
    // console.log(1111, "asc");
    orderType = target.value;
    // loadGrade();
  } else if (target.value == "desc") {
    // console.log(222, "desc");
    orderType = target.value;
    // loadGrade();
  }
  loadGrade();
};
/*跳转详情页
    点击事件
    点击哪一个商品，跳转到详情页就显示哪一个商品详情
    跳转页面的时候，直接带一个商品的id到下一个页面
        绑定点击事件
        
*/

// 演唱会的数据
function loadGrade() {
  $.ajax({
    type: "get",
    url: "../php/searchGoodsOrderLimit.php",
    data: {
      key,
      orderCol,
      orderType,
      pageIndex,
      showNum,
    },
    dataType: "json",
    success: function (result) {
      var { status, msg, list, currentIndex, count, maxPage } = result;

      if (status) {
        if (list.length) {
          var html = "";
          list.forEach(
            ({
              id,
              goodsid,
              title,
              items_txt1,
              items_txt2,
              items_price,
              img,
            }) => {
              html += `<div class="comDetails" id="goDetail_${goodsid}">
                    <!-- 左面图片 -->
                    <div class="deImg" id="goDetail_${goodsid}">
                    <img src="${img}" alt="" id="goDetail_${goodsid}">
                    </div>
                    <div class="particulars" id="goDetail_${goodsid}">
                        <div class="title" id="goDetail_${goodsid}">${title}</div>
                        <div class="venue" id="goDetail_${goodsid}">${items_txt1}</div>
                        <div class="showtime" id="goDetail_${goodsid}">${items_txt2}</div>
                        <div class="price" id="goDetail_${goodsid}">${items_price}<span>起</span></div>
                        <button class="purchased" id="goDetail_${goodsid}">购买</button>
                    </div>
                </div>`;
            }
          );
          //   console.log(html);

          listPage.innerHTML = html;
          //   console.log(listPage);

          pageIndex = pageIndex > maxPage ? maxPage : pageIndex;
          pageTips.textContent = `${currentIndex}/${maxPage}`;
          console.log(pageIndex);

          prev.onclick = function () {
            if (pageIndex <= 1) return false;
            pageIndex--;
            console.log(pageIndex);
            loadGrade();
          };

          next.onclick = function () {
            if (pageIndex >= maxPage) return false;
            pageIndex++;
            console.log(pageIndex);
            loadGrade();
          };
        } else {
          listPage.textContent = "暂无数据";
        }
      } else {
        alert(msg);
      }
    },
  });
}
